// 头部
.header {
    width: 100%;
    padding: .5em 0;
    border-bottom: 2px solid #1c91dd;

    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;

    .left {
        border-right: 1px solid #bdbdbd;
        padding: 0 1em;

        span {
            font-size: 1.5em;
            color: #1c91dd;
            height: 2em;
            line-height: 2em;
        }
    }

    .cent {
        width: 35%;

        img {
            width: 100%;
        }
    }

    .right {
        border-left: 1px solid #bdbdbd;
        padding: 0 1em;

        span {
            font-size: 1.5em;
            color: #1c91dd;
            height: 2em;
            line-height: 2em;
        }
    }

}

// 风险评估
.risk {
    width: 100%;
    border-top: 1px solid #bdbdbd;
    margin-bottom: 2em;

    .title {
        width: 35%;
        background-color: white;
        font-size: 1.5em;
        margin: 0 auto;
        position: relative;
        top: -0.8em;
        color: #1c91dd;
        text-align: center;
    }

    .grid {
        text-align: center;
        margin-top: -.5em;
        margin-bottom: 1em;

        ul {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            align-content: center;

            li {
                width: 23%;

                div {
                    padding: .5em;

                    img {
                        width: 100%;
                    }
                }

                p {
                    color: #000;
                    font-size: 1.1em;
                }
            }
        }
    }

    .photo {
        width: 100%;

        ul {
            display: flex;
            justify-content: space-evenly;
            align-items: stretch;
            align-content: center;
            flex-wrap: wrap;

            li {
                width: 33.3%;

                &:nth-child(2n) {
                    background: #f5f5f5;
                    padding: 0.5em 1em;

                    h3 {
                        color: #000;
                        font-size: 1.1em;
                        margin-bottom: 0.5em;
                    }

                    a {
                        width: 100%;
                        color: #666666;
                    }
                }
            }
        }
    }

    @media screen and (max-width:378px) {
        .title {
            width: 37%;
            font-size: 1.3em;
        }
    }

    @media screen and (max-width:322px) {
        .title {
            width: 39%;
            font-size: 1.1em;
        }
    }
}

// 人体工学介绍和应用
.ergonomics {
    width: 100%;
    border-top: 1px solid #bdbdbd;
    margin-bottom: 2em;

    .title {
        width: 50%;
        background-color: white;
        font-size: 1.5em;
        margin: 0 auto;
        position: relative;
        top: -0.8em;
        color: #1c91dd;
        text-align: center;
    }

    .two {
        display: inline-flex;
        justify-content: space-between;
        padding: 1em 0;
        width: 100%;

        .item {
            background-color: #55acee;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 49%;
            font-size: 1.3em;
            padding: 0.5em 0;
            color: #ffff;
            font-weight: bold;

            img {
                width: 1.5em;
                margin-right: 0.5em;
            }
        }
    }

    .one {
        background-color: #363a42;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        font-size: 1.3em;
        padding: 1em 0;
        font-weight: bold;
        color: #ffff;

        img {
            width: 2em;
            margin-right: 0.5em;
        }
    }

    @media screen and (max-width:378px) {
        .title {
            width: 55%;
            font-size: 1.3em;
        }

        .App {
            .item {
                font-size: 1.2em;
            }

            font-size: 1.2em;
        }
    }

    @media screen and (max-width:322px) {
        .title {
            width: 60%;
            font-size: 1.1em;
        }

        .App {
            .item {
                font-size: 1em;
            }

            font-size: 1em;
        }
    }
}

// 联系我们
.ContactUs {
    width: 100%;
    border-top: 1px solid #bdbdbd;
    padding-bottom: 5em;

    .title {
        width: 30%;
        background-color: white;
        font-size: 1.5em;
        margin: 0 auto;
        position: relative;
        top: -0.8em;
        color: #1c91dd;
        text-align: center;
    }

    .phone,
    .email,
    .address {
        width: 100%;

        img {
            width: 1.8em;
        }

        span {
            font-size: 1em;
        }
    }

    .phone {
        margin-bottom: 0.5em;
    }

    .email {
        margin-bottom: 0.5em;
        display: flex;
        align-items: center;

        .left {
            margin-right: 1em;
        }
    }

    .address {
        margin-bottom: 0.5em;
        display: flex;
        align-items: center;

        .left {
            margin-right: 1em;
        }
    }

    @media screen and (max-width:378px) {
        .title {
            width: 35%;
            font-size: 1.3em;
        }
    }

    @media screen and (max-width:322px) {
        .title {
            width: 40%;
            font-size: 1.1em;
        }
    }
}

//footer
.footer {
    width: 100%;
    position: sticky;
    bottom: 0;
    left: 0;
    background-color: #f5f5f5;
    padding: 1em 0;

    ul {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        color: #666666;

        li {
            text-align: center;

            span {
                font-size: 1.2em;
            }

            p {
                font-size: 1em;
            }
        }
    }
}